<template>
  <view class="box">
    <view class="head">
      <text>头像：</text>
     <view class="content"  @click="getList">
      		<view class="photobgc">
      		  <img src="/static/user.png" class="myphoto">
      		</view>
      	<!-- 	<text>{{userList.nickName}}</text> -->
      		<u-image width="300rpx" height="300rpx" :src="userList.avatarUrl"></u-image>
      </view>
    </view>
    <view class="name">
      姓名：<input type="text">
    </view>
    <view class="sex">
      性别：
      <view class="right">
              <uni-data-select
                v-model="value"
                :localdata="range"
                label="应用选择"
                :clear="false"
              ></uni-data-select>
        </view>
    </view>
    <view class="phone">
      手机号码：<input type="number" maxlength="11" >
    </view>
    <view class="service">
     <text> 服务区域：</text>
     <view class="picker">
         <picker mode="region" :value="date"  @change="bindDateChange">
             <view class="uni-input">{{date}}</view>
         </picker>
     </view>
    </view>
    <view class="address">
    <text>详细地址: </text>
    <input type="text">
    </view>
    <view class="code">
      <text>手机验证码：</text>
      <button type="default" class="btn">获取验证码</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        date:'北京市，北京市，东城区',
        value: 0,
        range: [
          { value: 0, text: "男" },
          { value: 1, text: "女" } ,
          ],
          userList: {},
      };
    },
    onLoad() {
    		},
    methods:{
      bindDateChange(e){
        console.log(e);
        this.date=e.detail.value
        console.log(this.date);
      },
      getList() {
        console.log(88888);
      				uni.getUserProfile({
      					desc:"获取个人信息",
      					success: (res) => {
      						this.userList = res.userInfo;
      						console.log(res.userInfo)
      						// console.log(res.userInfo.nickName)
                  
                  // console.log(this.userList.nickName);
                  
      					}
      				})
    }
    },
  }
</script>

<style lang="scss">
.box{
  font-size: 26rpx;
  margin-left:28rpx ;
  font-weight: 700;
  .head{
    height: 160rpx;
    border-bottom:  1rpx solid #eeecec;
    line-height: 160rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .photobgc{
      width: 80rpx;
      height: 80rpx;
      line-height: 80rpx;
      background-color: #eeecec;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 60rpx;
      .myphoto{
        width: 52rpx;
        height: 52rpx;
        
      }
    }
  }
  .name{
    height: 100rpx;
    border-bottom:  1rpx solid #eeecec;
    line-height: 100rpx;
    display: flex;
    align-items: center;
  }
  .sex{
    height: 100rpx;
    border-bottom:  1rpx solid #eeecec;
    display: flex;
    justify-content: space-between;
    line-height: 100rpx;
    }
    .right{
      width: 200rpx;
    }
  .phone{
    height: 100rpx;
    border-bottom:  1rpx solid #eeecec;
    line-height: 100rpx; 
    display: flex;
    align-items: center;
    
    
  }
  .service{
    height: 100rpx;
    border-bottom:  1rpx solid #eeecec;
    line-height: 100rpx;
    display: flex;
    justify-content: space-between;
  }
  .address{
    height: 100rpx;
    border-bottom:  1rpx solid #eeecec;
    line-height: 100rpx;
    display: flex;
    justify-content: start;
    align-items: center;
  }
  .code{
    height: 100rpx;
    width: 750rpx;
    border-bottom:  1rpx solid #eeecec;
    line-height: 100rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn{
      background-color: #3f51b5;
      color: #fff;
      font-size: 26rpx;
      width: 200rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: right;
      margin: 0 50rpx 0 0;
      
      
    }
  }
  
  
}
</style>
